<template>
  <h1 class="row-title">第一组</h1>
  <div class="row">
    <wl-card summary="前端主流布局系统进阶与实战，轻松解决页面布局难题"
      img-src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" />
  </div>
  <h1 class="row-title">第2组</h1>
  <div class="row">
    <wl-card summary="前端主流布局系统进阶与实战，轻松解决页面布局难题"
      img-src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960">
      <template #footer>
        <div class="footer">
          <div class="level">中级 · 5225人报名</div>
          <div class="price">￥399.00</div>
        </div>
      </template>
    </wl-card>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.footer {
  padding: 0 8px;
  font-size: 12px;
  text-align: left;
}

.level {
  color: #9199a1;
  margin-bottom: 8px;
}

.price {
  color: #f01414;
}

.footer-java {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 0 8px;
}
</style>
